<template>
    <div class="container-fluid">
        <div class="row page-title">
            <div class="col-xs-11">
                <h1>会员管理</h1>
            </div>
            <div class="col-xs-1">
                <a title="添加" @click="add">
                    <el-tooltip content="添加" placement="top">
                        <i class="el-icon-plus"></i>
                    </el-tooltip>
                </a>
            </div>
        </div>
        <el-form :inline="true" :model="searchForm">
            <el-form-item label="姓名" prop="name">
                <el-input v-model.trim="searchForm.name" clearable placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="电话号码">
                <el-input v-model="searchForm.phone" clearable placeholder="请输入电话号码"></el-input>
            </el-form-item>
            <el-form-item label="卡号">
                <el-input v-model="searchForm.card_no" clearable placeholder="请输入卡号"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
        </el-form> 
        <el-col :span="24" class="table-bottom-margin">
            <el-table :data="tableData" border style="width: 100%" :header-cell-class-name="headerbg">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话号码"> </el-table-column>
                <el-table-column prop="cardNo" label="卡号"> </el-table-column>
            </el-table>    
        </el-col>
        <el-col :span="24" class="table-bottom-margin" style="text-align:right" v-if="count>0">
            <el-pagination @size-change="pageSizeChange" @current-change="pageCurrentChange" :current-page="currentPage"
                :page-sizes="[10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
            </el-pagination>
        </el-col>  
        <!-- <cam></cam>     -->
        <test></test>
        <el-input type="number" v-model.number="age" clearable></el-input>
        {{'message:'+test()}}
        <el-button @click="toAbout">to About</el-button>
        <current-user>
            <template v-slot:user="{user}">
                <span style="color:red">
                    {{user.lastName}}
                </span>
            </template>
            <template v-slot:age="slotProps">
                <span style="color:blue">
                    {{slotProps.age}}
                </span>
            </template>
            <template #height="slotHeight">
                <span style="color:green">
                    {{slotHeight.height}}
                </span>
            </template>
            <template #weight="slotWeight">
                <span style="color:yellow">
                    {{slotWeight.weight}}
                </span>
            </template>
        </current-user>
        <template v-if="loginType">
            <label>Username</label>
            <input placeholder="Enter your username" key="username-input">
            </template>
            <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address" key="email-input">
        </template>
        <button @click="loginType=!loginType">wer</button>{{ai}}-{{ao}}
    </div>
</template>

<script>
// @ is an alias to /src @/components/HelloWorld.vue
import cam from '../components/cam.vue';
import test from '../components/test.vue';
import currentUser from '../components/currentUser.vue';
export default {
  name: 'home',
  data(){
    return{
        loginType:true,
        ai:'',
        ao:'',
        client:JSON.parse(sessionStorage.getItem('user')),
        currentPage:1,
        pageSize:10,
        count:0,
        headerbg:'headerbg',//表格头部背景色
        tableData:[],
        searchForm:{
            name: '',
            phone: '',
            card_no:'',
        },
        age:2
    }
  },
  components: {
    cam,
    test,
    currentUser,
  },
  created(){
  
  },
  mounted() {
    //仅用于第一次刷新列表
    // this.getList(10,this.currentPage);
  },
  activated() {//缓存机制（切换路由）
      if(this.$route.params.showLastData){//只有当新增了注册用户，才刷新列表,取最后一页。
          var lastPage = Math.ceil(this.count/10);
          this.getList(10,lastPage);
      }
  },
  methods:{    
      test(){
          return this.age+1;
      },  
      toAbout(){
          this.$router.push({name:'pramas',params:{name:'xuhui',age:this.age}})
      },   
      search:function(){
          this.getList(10,this.currentPage);
      },
      getList:function(PageSize,PageIndex){
          this.count = 0;
          this.tableData = [];
          axios.get(`member/list?pageSize=${PageSize}&pageNum=${PageIndex}&name=${this.searchForm.name}&phone=${this.searchForm.phone}&card_no=${this.searchForm.card_no}&empno=${this.client.empno}`,{
          })
          .then( (res)=> {
              this.count = res.data.total;
              this.tableData = res.data.list.map(t=>{
                  var phone = t.phone=="undefined"||t.phone=="null"?'':t.phone;
                  return Object.assign(t,{'phone':phone});
              });
          })
          .catch( (error)=> {
              this.$notify.error({title: '错误',message:error||'获取会员列表失败！'});
          });
      },
      add(){
          this.$router.push({ path: '/Register/MeberRegister' });
      },
      del:function(id){
          
      },
      edit(id){
          
      },
      pageSizeChange:function(val){
          this.pageSize = val;
          this.getList(val,this.currentPage);
      },
      pageCurrentChange:function(val){
          this.currentPage = val;
          this.getList(this.pageSize,val);
      }
  }
}
</script>
<style>
    
</style>